<template>
    <!-- 类目热销榜 -->
    <div class="hotSale">
        <h4>类目热销榜</h4>
        <div class="hotSale-top">
            <div class="left" @click="onClickLeft">
                <span>居家生活榜</span>
                <img src="https://yanxuan-item.nosdn.127.net/307a97ed1516fc2906a2cfa1680281bb.png" alt="">
            </div>
            <div class="right" @click="onClickRight">
                <span>美食酒水榜</span>
                <img src="https://yanxuan-item.nosdn.127.net/e440f73ceea9aebd25630e2906c0919e.png?quality=75&type=webp&imageView&thumbnail=200x200"
                    alt="">
            </div>
        </div>
        <div class="hotSale-bottom">
            <van-grid  :column-num="4" gutter=".125rem">
                <van-grid-item v-for="(v,index) in hotSaleArr" :key="index" @click="onClick(index)">
                    <p>{{ v.msg }}</p>
                    <van-image :src="v.img" />
                </van-grid-item>
            </van-grid>
        </div>
        <div class="hotSale-last" >
            <van-row >
            <van-col span="8" gutter=".3125rem">
                <h4>穿新衣</h4>
                <p>潮流百搭</p>
                <div class="img">
                    <img src="https://yanxuan.nosdn.127.net/static-union/16753187423c6ee4.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
                </div>
            </van-col>
            <van-col span="8">
                <h4>严选众筹</h4>
                <p>探索美与用</p>
                <div class="img">
                    <img src="https://yanxuan-item.nosdn.127.net/d398ebb1be7fd30f1e3c2a41b30c4ba9.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
                    <img src="https://yanxuan-item.nosdn.127.net/e9f01fb9a3d9e18f7a42dd9231390beb.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
                </div>
            </van-col>
        </van-row>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            hotSaleArr:[
                {
                    img:'https://yanxuan-item.nosdn.127.net/d75a0c845c03d59aafb01f05e2252940.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'服饰鞋包榜',
                },
                {
                    img:'https://yanxuan-item.nosdn.127.net/1b8e4a484e128c28a050cd2bc0c64396.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'个护清洁榜',
                },
                {
                    img:'https://yanxuan-item.nosdn.127.net/7d5ea424cd88d230a16df02f5d4be634.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'宠物生活榜',
                },
                {
                    img:'https://yanxuan-item.nosdn.127.net/f4d94189fd96007dba16120f9f69292e.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'数码家电榜',
                },
                {
                    img:'https://yanxuan-item.nosdn.127.net/02365e5d71d3e43f6273c23e13aaad9e.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'运动旅行榜',
                },
                {
                    img:'https://yanxuan-item.nosdn.127.net/0cf32107188d070db398e7b3262aa576.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'母婴亲子榜',
                },
                {
                    img:'https://yanxuan-item.nosdn.127.net/c295bb86e742122637445cc430499fbe.png?quality=75&type=webp&imageView&thumbnail=200x200',
                    msg:'严选全球榜',
                },
            ]
        }
    },
    methods:{
        onClickLeft(){
            this.$router.push('/lhot')
        },
        onClickRight(){
            this.$router.push('/rhot')
        },
        onClick(index){
            if(index ==0){
                this.$router.push('/pgsone')
            }else if(index ==1){
                this.$router.push('/pgstwo')
            }else if(index ==2){
                this.$router.push('/pgsthree')
            }else if(index ==3){
                this.$router.push('/pgsfour')
            }else if(index ==4){
                this.$router.push('/pgsfive')
            }else if(index ==5){
                this.$router.push('/pgssix')
            }else if(index ==6){
                this.$router.push('/pgsseven')
            }
        }
    }
}
</script>

<style scoped>
*{
    margin:0;
    padding:0;
}
.hotSale>h4 {
    font-weight: normal;
    margin: 0.9375rem 0.9375rem;
}

.hotSale-top {
    height: 6.25rem;
    display: flex;
    justify-content: space-evenly;
}

.hotSale-top div {
    width: 10.75rem;
    line-height: 4.25rem;
    font-size: .8125rem;
    display: flex;
    justify-content: space-between;
    padding-left: 0.9375rem;
    box-sizing: border-box;
}

.hotSale-top div img {
    width: 5.6875rem;
    height: 5.6875rem;
}

.hotSale-top div span {
    position: relative;   
     width: 100px;
}

.hotSale-top div span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2.84rem;
    width: 1.48rem;
    height: 0.08rem;
    background: #333;
}

.hotSale-top .left {
    background: #f9f3e4;
    margin-right: 0.2rem;
}

.hotSale-top .right {
    background: #ebeff6;
}
.van-image img{
    width:2.8125rem;
    height:2.9375rem;
}
.hotSale-bottom {
    font-size:.375rem;
    margin-top: 0.2rem;
    margin-bottom: 1.0625rem;
    padding: 0.4rem;
}
.hotSale-bottom .van-grid-item{
    width: 5.3125rem;
    height:6.625rem;
    padding-bottom: 0.125rem;
    
}
.hotSale-bottom>>>  .van-grid-item .van-grid-item__content{
    margin: 0 0.2rem 0.2rem 0;
    padding:.625rem;
    background:#f5f5f5;
}
.hotSale-last{
    padding: 0.4rem;
}
.hotSale-last  .van-row{
    /* display:flex;
    justify-content: space-between; */
}
.hotSale-last .van-col{
    /* width:48%; */
    height:8.3125rem;
    background:#f5f5f5;
    padding-top:0.2rem;
    box-sizing: border-box;
}
.hotSale-last .van-col:first-child{
    /* flex:1.5; */
    margin-right:.3125rem;
    width: 7.5rem;
    height:8.4375rem;
    text-align:center;
}
.hotSale-last .van-col:first-child p{
    color:#9d9d9d;
}
.hotSale-last .van-col:last-child{
    /* flex:2.5; */
    height:8.4375rem;
    width:13.75rem;
}
.hotSale-last .van-col:last-child p{
    color:#ef6e38;
    padding-left:1.9375rem;
}
.hotSale-last .van-col:last-child h4{
    padding-left:1.9375rem;
}
.hotSale-last .van-col img{
    width:3.75rem;
    height:3.75rem;
}
.hotSale-last  p{
    font-size:.75rem;
    font-weight:normal;
}

.hotSale-last .van-col .img{
    display: flex;
    justify-content: space-around;
    margin-top:.25rem;
}
.hotSale-last h4{
    /* padding-left:1rem; */
    margin-top:.8125rem;
}



.hotSale-last .van-row[data-v-20bf9016]{
    display:flex;
    justify-content:space-between;
}
</style>